<template>
    <view>
        <view class="header">
            <image class="headerBack" src="../../static/images/jpg02.jpg"></image>
            <u-navbar
                    :title="$lang('商品销售统计')"
                    :bgColor="'rgba(255,255,255,0)'"
                    :fixed="false"
                    autoBack
            >
            </u-navbar>
            <view class="searchFilter">
                <view class="fl">
                    <div class="icon">
                        <image src="../../static/images/icon11.png"></image>
                    </div>
                    <input type="text" :placeholder="$lang('请输入商品代码')" disabled v-model="formInline.goods_code" @confirm="filterSubmit">
                </view>
                <view class="fr" @click="showDrawer">
                    {{$lang('筛选')}}
                    <image src="../../static/images/icon12.png"></image>
                </view>
            </view>
        </view>
        <scroll-view scroll-y class="scrollView" :style="{height:scrollViewHeight}">
            <view class="table">
                <uni-table border :emptyText="$lang('暂无数据')">
                    <uni-tr class="tableHead">
                        <uni-th align="center" v-for="(item,index) in tableColumn" :key="index">{{$lang(item.label)}}</uni-th>
                        <uni-th align="center">{{$lang('操作')}}</uni-th>
                    </uni-tr>
                    <uni-tr v-for="(item,index) in tableData" :key="index">
                        <uni-td align="center" v-for="(data,dataIndex) in tableColumn" :key="dataIndex">
                            <text v-if="data.value == 'index'">{{index + 1}}</text>
                            <view v-else-if="data.value == 'image'">
                                <image :src="baseUrl + item[data.value]" style="width: 100rpx;height: 100rpx;"></image>
                            </view>
                            <text v-else>{{item[data.value]}}</text>
                        </uni-td>
                        <uni-td align="center">
                            <view class="uni-group">
                                <button class="text-btn" size="mini" type="primary" @click="$common.go(1,`/pages/salesReport/count?goods_code=${this.formInline.goods_code}`)">{{$lang('查看详情')}}</button>
                            </view>
                        </uni-td>
                    </uni-tr>
                </uni-table>
                <view class="pagination">
                    <uni-pagination :show-icon="true" :total="total" title="" @change="currentChange" />
                </view>
            </view>
        </scroll-view>
        <uni-drawer ref="showRight" mode="right">
            <view :style="{height:statusBarHeight + 'px'}"></view>
            <view class="filterTitle">{{$lang('筛选')}}</view>
            <scroll-view style="height: calc(100% - 375rpx);width: 600rpx" scroll-y="true">
                <view class="filterList">
                    <view class="li">
                        <view class="fl">{{$lang('开始时间')}}</view>
                        <view class="fr">
                            <uni-datetime-picker type="date" :clear-icon="false" v-model="formInline.start_time" :placeholder="$lang('年/月/日')"  />
                        </view>
                    </view>
                    <view class="li">
                        <view class="fl">{{$lang('结束时间')}}</view>
                        <view class="fr">
                            <uni-datetime-picker type="date" :clear-icon="false" v-model="formInline.end_time" :placeholder="$lang('年/月/日')"  />
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="drawerBtn">
                <view class="fl" @click="filterRest">{{$lang('重置筛选')}}</view>
                <view class="fr" @click="filterSubmit">{{$lang('确定')}}</view>
            </view>
        </uni-drawer>
    </view>
</template>

<script>
    import {
        reportOrderGoods
    } from '../../api/api'
    export default {
        data() {
            return {
                scrollViewHeight:0,
                statusBarHeight:0,
                formInline:{
                    page: 1,
                    goods_code: '',
                    start_time: '',
                    end_time: ''
                },
                tableData:[],
                tableColumn:[
                    {label:this.$lang('序号'),value:'index'},
                    {label:this.$lang('商品代码'),value:'goods_code'},
                    {label:this.$lang('商品名称'),value:'goods_name'},
                    {label:this.$lang('商品图片'),value:'image'},

                    {label:this.$lang('销售数量'),value:'total_quantity'},
                    {label:this.$lang('销售金额'),value:'total_amount'},
                    {label:this.$lang('销售成本'),value:'total_stock_price'},
                    {label:this.$lang('毛利'),value:'profit'},
                    {label:this.$lang('毛利率'),value:'profit_rate'},
                ],
                baseUrl:''
            }
        },
        onLoad(options) {
            this.baseUrl = this.$config.baseUrl;
            this.formInline.goods_code = options.goods_code;
            let systemInfo = uni.getSystemInfoSync();
            this.scrollViewHeight = systemInfo.screenHeight - systemInfo.statusBarHeight - this.$common.rpxToPx(177) + 'px'
            this.statusBarHeight = systemInfo.statusBarHeight;
            this.getList();
        },
        methods: {
            currentChange(e){
                this.formInline.page = e.current;
                this.getList();
            },
            getList(){
                reportOrderGoods(this.formInline).then(res => {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                })
            },
            filterRest(){
                this.formInline = {
                    page: 1,
                    shop_id: '',
                    status: '',
                    goods_code: '',
                    start_time: '',
                    end_time: ''
                }
            },
            filterSubmit(){
                this.formInline.page = 1;
                this.getList();
                this.$refs.showRight.close();
            },
            showDrawer() {
                this.$refs.showRight.open();
            },
        }
    }
</script>
<style>
    page{
        background: #f5f5f5;
    }
</style>
<style lang="scss" scoped>
    .header{
        position: relative;
        .headerBack{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .nav{
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 25rpx 0 25rpx;
            .li{
                /*flex: 1;*/
                text-align: center;
                position: relative;
                height: 75rpx;
                font-size: 30rpx;
                color: #555;
                display: flex;
                flex-direction: column;
                /*justify-content: center;*/
                align-items: center;
                image{
                    width: 38rpx;
                    height: 12rpx;
                    /*position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translateX(-50%);*/
                    display: none;
                    margin-top: 8rpx;
                }
                &.active{
                    font-size: 32rpx;
                    color: #333;
                    image{
                        display: block;
                    }
                }
            }
        }
        .searchFilter{
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 2;
            padding: 0 24rpx 24rpx 24rpx;
            .fl{
                width: 580rpx;
                height: 70rpx;
                border-radius: 70rpx;
                border: 1px solid #c3ddf7;
                background: #fff;
                display: flex;
                align-items: center;
                .icon{
                    width: 36rpx;
                    height: 31rpx;
                    padding: 0 30rpx 0 37rpx;
                    position: relative;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                    &:after{
                        content: '';
                        display: block;
                        width: 1px;
                        height: 29rpx;
                        background: #d2d2d2;
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                input{
                    flex:1;
                    padding: 0 25rpx;
                    font-size: 24rpx;
                }
            }
            .fr{
                padding: 0 26rpx 0 15rpx;
                height: 52rpx;
                border-radius: 5rpx;
                line-height: 52rpx;
                font-size: 26rpx;
                color: #365aa6;
                position: relative;
                background: #fff;
                image{
                    width: 20rpx;
                    height: 21rpx;
                    position: absolute;
                    right: 6rpx;
                    bottom: 6rpx;
                }
            }
        }
    }
    .scrollView{
        position: fixed;
        bottom: 0;
        left: 0;
        width:100%;
        z-index: 9;
        .table{
            padding: 27rpx 24rpx;
        }
    }
    .filterTitle{
        height: 80rpx;
        border-bottom: 1px solid #eee;
        text-align: center;
        font-size: 32rpx;
        color: #222;
    }
    .filterList{
        padding: 0 25rpx;
        .li{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 30rpx;
            .fl{
                width: 200rpx;
            }
            .fr{
                position: relative;
                flex: 1;
                /deep/ .uni-stat__select{
                    .uni-select{
                        font-size: 32rpx;
                        border-color: #757575;
                        border-radius: 8rpx;
                        padding: 0 25rpx;
                        height: 90rpx;
                        .uni-select__input-box{
                            height: 100%;
                            .uni-select__input-text{
                                font-size: 32rpx;
                            }
                            .uni-icons{
                                font-size: 32rpx;
                                color: #757575;
                            }
                        }
                    }
                }
                input{
                    font-size: 32rpx;
                    border: 1px solid #757575;
                    border-radius: 8rpx;
                    padding: 0 25rpx;
                    height: 90rpx;
                }
                /deep/ .uni-date{
                    .uni-date-picker__container{
                        position: absolute;
                        left: -50%;
                        .uni-popper__arrow{
                            left: 50%;
                        }
                    }
                    .uni-date-x--border{
                        border-color: #757575;
                        border-radius: 8rpx;
                        .uni-date-x{
                            border-radius: 8rpx;
                            font-size: 32rpx;
                            .uni-icons{
                                font-size: 40rpx !important;
                                color: #365aa6 !important;
                            }
                            .uni-date__x-input{
                                height: 90rpx;
                                line-height: 90rpx;
                                font-size: 32rpx;
                                margin-left: 12rpx;
                            }
                        }
                    }
                }
            }
        }
    }
    .drawerBtn{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 25rpx;
        .fl{
            width: 260rpx;
            height: 90rpx;
            line-height: 90rpx;
            background: #fff;
            border: 1px solid #bababa;
            text-align: center;
            border-radius: 90rpx;
            font-size: 36rpx;
            color: #363636;
        }
        .fr{
            width: 260rpx;
            height: 90rpx;
            line-height: 90rpx;
            background: #365aa6;
            border: 1px solid #365aa6;
            text-align: center;
            border-radius: 90rpx;
            font-size: 36rpx;
            color: #fff;
        }
    }
</style>
